<template>
  <div class="label-container">
    <div class="dashboard-text">
      <div class="lef">
        <i />
        信息发布标签设置
      </div>
    </div>
    <panel class="data-list">
      <div slot="header" class="dhead">数据列表</div>
      <div class="daction">
        <ul class="dacon">
          <li @click="addBtn">添加用户信息发布标签</li>
          <!-- <li>导出数据</li>-->
          <!-- <li class="con">
            <el-select v-model="showVal" filterable placeholder="显示条数">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li class="con">
            <el-select v-model="sortVal" filterable placeholder="排序方式">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li> -->
        </ul>
      </div>
      <div class="data-bd">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          class="table-class"
          :header-cell-style="{
            'background-color': '#fafafa',
            'color':'#333',
            'height':'56px',
            'line-height':'56px',
            'font-size':'14px',
            'background': 'rgba(242, 242, 242, 1)'
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" />
          <el-table-column label="标签名称" align="center">
            <template slot-scope="scope">{{ scope.row.tagName }}</template>
          </el-table-column>
          <el-table-column prop="userCount" label="用户人数" align="center" />
          <el-table-column prop="tagCondition" label="自动打标签条件" show-overflow-tooltip align="center" width="300">
            <template slot-scope="scope">
              <p>信息发布类型:{{ scope.row.tagCondition[0].code }}</p>
              <p>行业细分类目:{{ scope.row.tagCondition[1].code }}</p>
              <p>关注行业细分类目:{{ scope.row.tagCondition[2].code }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="action"
            label="操作"
            show-overflow-tooltip
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="editBtn(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                style="color: rgba(245,108,108,1);"
                @click="delTagNews(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </panel>
    <!-- fenye -->
    <div class="pagination-block">
      <div class="del-button" @click="delAll(multipleSelection)">批量删除</div>
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        :background="true"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next,total,slot, jumper"
        :total="totalNum"
        @current-change="handleCurrentChange"
      >
        <div class="page-number" layout="slot">
          <!-- <p>共17页\100条数据</p> -->
          <div class="jump-button">跳至</div>
        </div>
      </el-pagination>
    </div>
    <!-- 编辑标签类型对话框 -->
    <div class="dialog">
      <el-dialog title="提示" :visible.sync="editlevelDialog" width="844px" center>
        <div slot="title" class="header-title">
          <div class="lef">
            <i />
            <span v-show="labelname" class="title-name">{{ labelname }}</span>
          </div>
        </div>
        <div class="dialog-bd">
          <p>
            <!-- <i style="color:red;padding-left:38px">*</i>
            <label>标签名称:</label>
            <input v-model="labelNameValue" type="text" style="width:348px;padding-left: 15px" class="p1"> -->
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
              <el-form-item label="标签名称:" prop="labelname">
                <el-input v-model="ruleForm.labelname" style="width:348px;padding-left: 15px" />
              </el-form-item>
            </el-form>
          </p>
          <p>
            <label>自动打标签条件：</label>
            <label>信息发布类型</label>
            <el-select v-model="valueType" placeholder="请选择">
              <el-option
                v-for="item in optionsType"
                :key="item.messageCode"
                :label="item.messageAbstract"
                :value="item.messageCode"
              />
            </el-select>
          </p>
          <p>
            <label class="tit">或者</label>
            <label>行业细分类目</label>
            <el-select v-model="category" placeholder="请选择">
              <el-option
                v-for="item in categoryLsit"
                :key="item.messageCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </p>
          <p>
            <label class="tit">或者</label>
            <label>关注行业细分类目</label>
            <el-select v-model="industry" placeholder="请选择">
              <el-option
                v-for="item in categoryLsit"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            style="width: 100px;height: 40px;background: rgba(204, 204, 204, 1);border-radius: 2px;"
            @click="editlevelDialog = false"
          >取 消</el-button>
          <el-button
            type="primary"
            style="width: 100px;height: 40px;background:rgba(72,141,255,1);border-radius: 2px;"
            @click="editSureBtn"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 添加标签类型对话框 -->
    <div class="dialog">
      <el-dialog title="提示" :visible.sync="addlevelDialog" v-if="addlevelDialog" @closed="resetForm" width="844px" center>
        <div slot="title" class="header-title">
          <div class="lef">
            <i />
            <span v-show="labelname1" class="title-name">{{ labelname1 }}</span>
          </div>
        </div>
        <div class="dialog-bd">
          <p>
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
              <el-form-item label="标签名称:" prop="labelname">
                <el-input v-model.trim="ruleForm.labelname" style="width:348px;padding-left: 15px" />
              </el-form-item>
            </el-form>
            <!-- <i style="color:red;padding-left:38px;">*</i>
            <input v-model="labelNameValue" type="text" style="width:348px;padding-left: 15px" class="p1">
            <label>标签名称:</label> -->
          </p>
          <p>
            <label>自动打标签条件：</label>
            <label>信息发布类型</label>
            <el-select v-model="valueType" placeholder="请选择">
              <el-option
                v-for="item in optionsType"
                :key="item.messageCode"
                :label="item.messageAbstract"
                :value="item.messageCode"
              />
            </el-select>
          </p>
          <p>
            <label class="tit">或者</label>
            <label>行业细分类目</label>
            <el-select v-model="category" placeholder="请选择">
              <el-option
                v-for="item in categoryLsit"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </p>
          <p>
            <label class="tit">或者</label>
            <label>关注行业细分类目</label>
            <el-select v-model="industry" placeholder="请选择">
              <el-option
                v-for="item in categoryLsit"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            style="width: 100px;height: 40px;background: rgba(204, 204, 204, 1);border-radius: 2px;"
            @click="addlevelDialog = false"
          >取 消</el-button>
          <el-button
            type="primary"
            style="width: 100px;height: 40px;background:rgba(72,141,255,1);border-radius: 2px;"
            @click="addSureBtn"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getTagList, delTagList, tagNewsClass, tagNewsIndustry, addUserActiveLabel, deleteTagNews, editTagList } from '@/api/usermanage'
export default {
  data() {
    return {
      // 分页
      pageNum: 1,
      pageSize: 3,
      totalNum: 0,
      currentPage: 1,
      tableData: [],
      multipleSelection: [],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],

      // 标签名字
      labelNameValue: '',
      valueType: '',
      optionsType: [{ messageCode: 'r', messageAbstract: '资源' }, { messageCode: 'd', messageAbstract: '需求' }, { messageCode: 's', messageAbstract: '服务' }],
      category: '',
      categoryLsit: [],
      industry: '',
      industryLsit: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      showVal: '',
      sortVal: '',
      labelname: '编辑标签类型', //
      labelname1: '添加标签类型', //
      editlevelDialog: false,
      addlevelDialog: false,
      tagCodeValue: '',
      ruleForm: {
        labelname: ''
      },
      rules: {
        labelname: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              var reg = /^[\u4E00-\u9FA5]+$/g
              if (!reg.test(value)) {
                callback(new Error('请输入中文'))
              } else {
                ('blur')
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }

    }
  },
  created() {
    this.getmsgTag()
    this.getTagNewsClass()
    this.getTagNewsIndustry()
  },
  methods: {
    resetForm(){
      this.ruleForm = {};
    },
    // 获取列表数据
    getmsgTag() {
      getTagList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        tagType: 'xx'
      }).then(res => {
        console.log(res)
        this.tableData = res.data.list
        this.totalNum = res.data.total
      })
    },
    // 删除功能
    delTagNews(val) {
      this.$confirm('确认删除标签吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const delValue = val.tagCode
        deleteTagNews(
          [delValue]
        ).then(res => {
          this.getmsgTag()
        })
      })
    },
    // 批量删除
    delAll() {
      console.log(this.multipleSelection)
      deleteTagNews(this.multipleSelection).then(res => {
        this.getmsgTag()
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      // this.multipleSelection = val
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i].tagCode)
      }
      console.log(this.multipleSelection)
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      // 第几页数据等于跳转页面数据
      this.pageNum = currentPage
      this.getmsgTag()
      // console.log(`当前页: ${val}`)
    },
    // 编辑标签内容回显
    // 编辑标签类型
    editBtn(val) {
      console.log(val, 'bvvv')
      this.ruleForm.labelname = val.tagName
      // console.log(this.tagCodeValue, 'this.tagCodeValue')
      this.editlevelDialog = true
      this.industry =  val.tagCondition[2].code
      // this.labelNameValue = val.tagCondition[0].code
      this.valueType = val.tagCondition[0].code
      this.category = val.tagCondition[1].code
    },
    // 编辑确定按钮
    editSureBtn() {
      if (this.valueType && this.category && this.industry && this.ruleForm.labelname) {
        editTagList({
          tagName: this.ruleForm.labelname,
          tagType: 'xx',
          tagCode: this.tagCodeValue,
          condition: [
            {
              code: this.valueType,
              index: 1
            },
            {
              code: this.category,
              index: 2
            },
            {
              code: this.industry,
              index: 3
            }
          ]
        }).then(res => {
          this.$message.success('编辑成功')
          this.getmsgTag()
          this.editlevelDialog = false
        })
      } else {
        this.$message.error('字段不能为空')
      }
    },
    // 添加标签
    addBtn() {
      console.log('11111 :', 11111);
      this.addlevelDialog = true
      this.valueType = ''
      this.ruleForm.labelname = ''
      this.$set(this.category, null)
      // this.category = null
      console.log(this.category)
    },
    // 添加信息标签信息类型回显
    getTagNewsClass() {
      // tagNewsClass().then(res => {
      //   this.optionsType = res.data
      // })
    },
    // 添加信息标签行业
    getTagNewsIndustry() {
      tagNewsIndustry({

      }).then(res => {
        // console.log(res)
        this.categoryLsit = res.data
        // console.log(this.categoryLsit)
      })
    },
    // 添加确定按钮
    addSureBtn(ruleForm) {
      if (this.valueType && this.category && this.industry && this.ruleForm.labelname) {
        addUserActiveLabel({
          tagName: this.ruleForm.labelname,
          tagType: 'xx',
          condition: [
            {
              code: this.valueType,
              index: 1
            },
            {
              code: this.category,
              index: 2
            },
            {
              code: this.industry,
              index: 3
            }
          ]
        }).then(res => {
          // console.log(res)
          this.$message.success('添加成功')
          this.getmsgTag()
          this.addlevelDialog = false
        })
      } else {
        this.$message.error('字段不能为空')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.label-container {
  padding: 0 110px 0 26px;
  margin: 16px 0;
  width:100%;
  /*overflow-x: auto;*/
  .dashboard-text {
    margin-top: 17px;
    height: 37px;
    .lef {
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      i {
        display: inline-block;
        width: 11px;
        height: 20px;
        background: #488dff;
        border-radius: 4px;
        margin-right: 12px;
      }
    }
  }
  .data-list {

    .dhead {

    }
    .daction {
      width: 100%;
      height: 88px;
      padding: 24px 0;
      //   background: #ccc;
      .dacon {
        overflow: hidden;
        li {
          float: left;
          width: 106px;
          height: 40px;
          background: rgba(72, 141, 255, 1);
          border-radius: 2px;
          line-height: 38px;
          font-size: 15px;
          cursor: pointer;
          color: #fff;
          margin-right: 25px;
          text-align: center;
          &:nth-child(1) {
            width: 163px;
          }
        }
        .con {
          width: 120px;
          // border: 1px solid rgba(203, 203, 203, 1);
          color: #999;
          background: #fff;
          position: relative;
        }
      }
    }
    .action {
      p {
        line-height: 50px;
        cursor: pointer;
        height: 31px;
      }
    }
  }
  .pagination-block {
    right: 0px;
  }
  // 对话框
  .dialog {
    width: 844px;
    .header-title {
      height: 56px;
      overflow: hidden;
      .lef {
        float: left;
        line-height: 37px;
        font-size: 16px;
        font-weight: 900;
        color: #333;
        i {
          float: left;
          margin-top: 8.5px;
          width: 11px;
          height: 20px;
          background: rgba(72, 141, 255, 1);
          border-radius: 4px;
          margin-right: 12px;
        }
      }
      .rig {
        float: right;
        display: block;
        width: 22px;
        height: 22px;
      }
    }
    //
    .dialog-bd {
      width: 66%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      p {
        display: flex;
        justify-content:flex-start;
        align-items: center;
        width: 100%;
        margin-bottom: 30px;
        i{
          color:red;
          padding-left:76px;
        }
      }
      .tit {
        // padding-right: 80px;
        padding-left: 80px;
      }
      label {
        width: 150px;
        height: 14px;
        font-size: 14px;
        line-height: 14px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: #333333;
        text-align: left;
        padding-right: 20px;
      }
      input {
        width: 100px;
        height: 40px;
        line-height: 40px;
        border: 1px solid rgba(204, 204, 204, 1);
        border-radius: 2px;
      }
      .dialog-footer {
        .el-button {
          width: 100px;
          height: 40px;
          background: rgba(204, 204, 204, 1);
          border-radius: 2px;
        }
      }
    }
  }
}
</style>
